<template>
  <a-drawer
    :title="titleMap"
    :width="550"
    :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }"
    @close="close"
  >
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }"
      layout="horizontal"
    >
      <a-form-item
        :label="$t('user.verification-code.required11156611057714811222444355')"
      >
        <br />
        <a-input
          v-decorator="[
            'ConfigurationItemsContent',
            {
              rules: [
                { required: true, message: $t('user.verification-code1') },
              ],
            },
          ]"
          :placeholder="$t('user.verification-code.r')"
          style="width: 400px; margin-left: -95px"
        />
      </a-form-item>
      <a-form-item
        :label="$t('user.verification-code.required11156611057714811222567')"
      >
        <br />
        <a-input
          v-decorator="[
            'ConfigurationItemsContentEn',
            {
              rules: [
                { required: true, message: $t('user.verification-code2') },
              ],
            },
          ]"
          :placeholder="$t('user.verification-code.re')"
          style="width: 400px; margin-left: -95px"
        />
      </a-form-item>
      <!-- 1111 -->
      <a-form-item
        :label="$t('user.ve25')"
        :style="lang ? 'margin-left: -35px' : ''"
      >
        <br />
        <a-input
          v-decorator="[
            'ConfigurationItemsAnnotation',
            { rules: [{ required: true, message: $t('user.ve23') }] },
          ]"
          :placeholder="$t('user.ve27')"
          style="width: 400px"
          :style="lang ? 'margin-left: -65px' : 'margin-left: -95px'"
        />
      </a-form-item>
      <a-form-item
        :label="$t('user.ve26')"
        :style="lang ? 'margin-left: -35px' : ''"
      >
        <br />
        <a-input
          v-decorator="[
            'ConfigurationItemsAnnotationEn',
            { rules: [{ required: true, message: $t('user.ve24') }] },
          ]"
          :placeholder="$t('user.ve28')"
          style="width: 400px"
          :style="lang ? 'margin-left: -65px' : 'margin-left: -95px'"
        />
      </a-form-item>
      <a-form-item label="ID" v-if="mode == 1" class="hidden">
        <a-input v-decorator="['Id']" />
      </a-form-item>
      <a-form-item
        label="ConfigurationItemsState"
        v-if="mode == 0"
        class="hidden"
      >
        <a-input v-decorator="['ConfigurationItemsState']" />
      </a-form-item>
    </a-form>
    <div
      class="absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center"
    >
      <a-row class="w-full" :gutter="24">
        <a-col :span="12">
          <a-button
            class="w-full border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow"
            @click="close"
            >{{ $t("app.setting.themecolor.rr") }}</a-button
          >
        </a-col>
        <a-col :span="12">
          <a-button
            :loading="loading"
            class="w-full border-none shadow"
            type="primary"
            @click.native.prevent="submit()"
          >
            <span v-if="!loading">{{
              $t("user.verification-code.required111566165")
            }}</span>
            <span v-else>{{ $t("app.setting.themecolor.tt") }}...</span>
          </a-button>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>

<script>
import { configurationCreateUpdate } from "@/api/configs";

export default {
  data() {
    return {
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      // 这个要根据服务修改title
      titleMap: "",
      // titleMap: ['新建数据处理活动阶段', '修改数据处理活动阶段'],
      mode: 0,
      lang: localStorage.getItem("lang").includes("zh-CN"),
    };
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key === "lang") {
        let lang = JSON.parse(e.value);
        console.log(lang);
        if (lang === "zh-EN") {
          that.lang = false;
        } else {
          that.lang = true;
        }
      }
    });
  },
  methods: {
    /**
     *
     * @param {*} type 0 新增 1 修改
     * @param {*} data 列表传过来的值
     */
    async open(mode = 0, data = {}) {
      this.mode = mode;
      this.titleMap = this.$t("user.verification-code.required111566778899");
      this.visible = true;
      await this.$nextTick();
      // 如果是修改
      if (mode == 1) {
        this.titleMap = this.$t("user.verification-code.required111566778888");
        //修改的时候需要给form赋值
        this.form.setFieldsValue({
          ConfigurationItemsContent: data.ConfigurationItemsContent,
          ConfigurationItemsAnnotation: data.ConfigurationItemsAnnotation,
          ConfigurationItemsContentEn: data.ConfigurationItemsContentEn,
          ConfigurationItemsAnnotationEn: data.ConfigurationItemsAnnotationEn,
          Id: data.Id,
        });
      } else {
        this.form.setFieldsValue({
          ConfigurationItemsState: 6,
        });
      }
    },
    // 提交 通用的
    submit() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values };
            await configurationCreateUpdate({ ...params });
            // 如果成功就调用父页面当前组件的succeed上绑定的事件
            this.$emit("succeed");
            this.$message.success(
              this.$t("user.verification-code.required111566110577308")
            );
            //如果成功就关闭
            this.close();
          } catch (error) {
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    // 关闭 通用的
    close() {
      // 修改侧边栏状态
      this.visible = false;
      // 清空form的值
      this.form.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-form-item-label {
  display: inline-block;
  overflow: visible;
  line-height: 39.9999px;
  text-align: right;
  vertical-align: middle;
}
</style>
